<template>
  <div class="details">
    <van-nav-bar class="nav-bar" @click-left="$router.push(path)" title="标题" left-arrow v-if="scrollTop < 120">
      <template #title>
        <div class="logo">
          黑马头条
        </div>
      </template>
      <template #right>
        <van-icon name="search" size="18" />
        <img src="@/assets/icon/more.png" alt="" width="20" height="20" style="margin-left: 20px">
      </template>
    </van-nav-bar>
    <van-nav-bar class="nav-bar nav-left" @click-left="$router.push(path)" title="标题" left-arrow v-else>
      <template #title>
        <div class="userInfo">
          <img v-if="articleObj.aut_photo" :src="articleObj.aut_photo" alt="">
          <img v-else src="@/assets/logo.png" alt="">
          <span>{{articleObj.aut_name}}</span>
        </div>
      </template>
      <template #right>
        <div class="btn" v-if="!articleObj.is_followed" @click="followed(articleObj.aut_id)">
          关 注
        </div>
        <div class="btn followed" v-else @click="followedTarget(articleObj.aut_id)">
          已 关 注
        </div>
        <img src="@/assets/icon/more.png" alt="" width="20" height="20" style="margin-left: 20px">
      </template>
    </van-nav-bar>
    <div class="content">
      <div class="title">
        {{articleObj.title}}
      </div>
      <div class="user">
        <div class="img">
          <img v-if="articleObj.aut_photo" :src="articleObj.aut_photo" alt="">
          <img v-else src="@/assets/logo.png" alt="">
        </div>
        <div class="username">
          {{articleObj.aut_name}}
        </div>
        <div class="btn" v-if="!articleObj.is_followed" @click="followed(articleObj.aut_id)">
          关 注
        </div>
        <div class="btn followed" v-else @click="followedTarget(articleObj.aut_id)">
          已 关 注
        </div>
      </div>
      <div class="article" v-html="articleObj.content">
      </div>
      <div class="operation">
        <div class="star" @click="liking(articleObj.art_id)" :class="{'txt-color': articleObj.attitude === 1}">
          <i class="iconfont">&#xe89d;</i>
          点赞
        </div>
        <div class="hate" @click="dislikes(articleObj.art_id)" :class="{'txt-color': articleObj.attitude === 0}">
          <i class="iconfont">&#xe8a1;</i>
          不喜欢
        </div>
      </div>
    </div>
    <div class="comment-list">
      <van-list
        v-model="loading"
        :finished="finished"
        finished-text="没有更多了"
        @load="onLoad"
        v-if="bol"
      >
        <div class="item" v-for="(item,index) in list" :key="index">
          <div class="avatar">
            <img :src="item.aut_photo" alt="">
          </div>
          <div class="comment-content">
            <div class="top">
              <span class="nickname">{{item.aut_name}}</span>
              <div class="praise" :class="{'txt-color': item.is_liking}">
                <i class="iconfont" @click="commentLikings(item)">&#xe89d;</i>
                <span>{{item.like_count}}</span>
              </div>
            </div>
            <div class="middle">
              {{item.content}}
            </div>
            <div class="floor">
              <div class="date">
                {{item.pubdate | formatTime}}
              </div>
              <div class="reply" @click="show2Click(item)">
                {{item.reply_count}}回复
              </div>
            </div>
          </div>
        </div>
      </van-list>
    </div>
    <div class="bottom">
      <div class="write-comment" @click="showPopup">
        <span>写评论</span>
      </div>
      <div class="comment">
        <i class="iconfont">&#xe890;</i>
        <span>{{commentsObj.total_count}}</span>
      </div>
      <div class="collect" :class="{'txt-color': articleObj.is_collected}" @click="collectArticles(articleObj.art_id)">
        <i class="iconfont">&#xe89b;</i>
      </div>
      <div class="star" @click="liking(articleObj.art_id)" :class="{'txt-color': articleObj.attitude === 1}">
        <i class="iconfont">&#xe89d;</i>
      </div>
    </div>
    <van-popup v-model="show" position="bottom" :style="{height:'30%'}" class="popup">
      <van-field
        class="field"
        v-model="message"
        rows="4"
        autosize
        type="textarea"
        maxlength="80"
        show-word-limit
      />
      <div class="send" v-if="message.trim().length === 0">发送</div>
      <div class="send" v-else @click="sendComments" :style="{color: '#e40137'}">发送</div>
    </van-popup>
    <van-popup
      class="reply-popup"
      round
      close-icon-position="top-left"
      @close="show2Close"
      v-model="show2"
      position="bottom"
      :style="{ height: '70%' }">
      <div class="reply-comment-text">
        当前评论
      </div>
      <div class="item" v-if="replyComments !== null">
        <div class="avatar">
          <img :src="replyComments.aut_photo" alt="">
        </div>
        <div class="comment-content">
          <div class="top">
            <span class="nickname">{{replyComments.aut_name}}</span>
            <div class="praise" :class="{'txt-color': replyComments.is_liking}">
              <i class="iconfont" @click="commentLikings(replyComments)">&#xe89d;</i>
              <span>{{replyComments.like_count}}</span>
            </div>
          </div>
          <div class="middle">
            {{replyComments.content}}
          </div>
          <div class="floor">
            <div class="date">
              {{replyComments.pubdate | formatTime}}
            </div>
          </div>
        </div>
      </div>
      <div class="comment-reply-txt">
        评论的回复
      </div>
      <div class="comment-reply-content">
        <van-list
          v-model="loading2"
          :finished="finished2"
          finished-text="没有更多了"
          @load="onLoad2"
        >
          <div class="item" v-for="(item,index) in list2" :key="index">
            <div class="avatar">
              <img :src="item.aut_photo" alt="">
            </div>
            <div class="comment-content">
              <div class="top">
                <span class="nickname">{{item.aut_name}}</span>
                <div class="praise" :class="{'txt-color': item.is_liking}">
                  <i class="iconfont" @click="commentLikings(item)">&#xe89d;</i>
                  <span>{{item.like_count}}</span>
                </div>
              </div>
              <div class="middle">
                {{item.content}}
              </div>
              <div class="floor">
                <div class="date">
                  {{item.pubdate | formatTime}}
                </div>
              </div>
            </div>
          </div>
        </van-list>
        <div class="reply-bottom">
          <van-field
            v-model="sms"
            center
            clearable
            placeholder="发表评论"
            class="send-input"
          >
            <template #button>
              <van-button @click="sendReplyComment" class="send-btn" size="small" round type="danger">发送</van-button>
            </template>
          </van-field>
        </div>
      </div>
    </van-popup>
  </div>
</template>

<script>
import {
  articlesInfo,
  // articleLikings,
  // articleDislikes,
  // articleLikingsTarget,
  // articleDislikesTarget,
  // userFollowings,
  // userFollowingsTarget,
  // articleCollections,
  // articleCollectionsTarget,
  commentsQuery,
  commentsBody,
  commentLikings,
  commentLikingsTarget
} from '@/api/details'
export default {
  name: 'details',
  data () {
    return {
      content: '',
      scrollTop: 0,
      id: this.$route.query.id,
      path: this.$route.query.path,
      articleObj: {},
      isLike: false, // 用户是否点赞
      isHate: false, // 是否不喜欢
      isCollected: false, // 是否收藏了该文章
      commentsObj: {}, // 评论
      show: false,
      show2: false,
      message: '',
      loading: false,
      finished: false,
      list: [],
      replyComments: {},
      replyComments2: {},
      loading2: false,
      finished2: false,
      list2: [],
      sms: '',
      bol: true
    }
  },
  async created () {
    this.initArticlesInfo()
  },
  mounted () {
    window.addEventListener('scroll', this.handleScroll)
  },
  methods: {
    show2Close () {
      this.finished2 = false
      // this.list2 = []
    },
    async show2Click (item) {
      this.show2 = true
      this.replyComments = item
      const res = await commentsQuery({
        type: 'c',
        source: this.replyComments.com_id.c.join(''),
        limit: 10
      })
      this.replyComments2 = res.data.data
    },
    async onLoad2 () {
      const res = await commentsQuery({
        type: 'c',
        source: this.replyComments.com_id.c.join(''),
        offset: this.replyComments2.last_id,
        limit: 10
      })
      this.replyComments2.last_id = res.data.data.last_id
      this.list2.push(...res.data.data.results)
      this.loading2 = false
      if (this.list2.length >= res.data.data.total_count) {
        this.finished2 = true
      }
    },
    showPopup () {
      this.show = true
    },
    async onLoad () {
      const res = await commentsQuery({
        type: 'a',
        source: this.id,
        offset: this.commentsObj.last_id,
        limit: 10
      })
      this.commentsObj.last_id = res.data.data.last_id
      this.list.push(...res.data.data.results)
      this.loading = false
      if (this.list.length >= res.data.data.total_count) {
        this.finished = true
      }
    },
    handleScroll () {
      const scrollTop = document.documentElement.scrollTop || window.pageYOffset || document.body.scrollTop
      this.scrollTop = scrollTop
    },
    async initArticlesInfo () {
      const res = await articlesInfo(this.id)
      this.articleObj = res.data.data
      console.log('article', this.articleObj)
      this.isLike = this.articleObj.attitude === 1 // 是否对文章点赞
      this.isHate = this.articleObj.attitude === 0 // 是否对文章不喜欢
      this.isCollected = this.articleObj.is_collected // 是否关注
      const res2 = await commentsQuery({
        type: 'a',
        source: this.id
      })
      this.commentsObj = res2.data.data
    },
    // 文章点赞/取消点赞
    async liking (id) {
      if (this.articleObj.attitude === 1) {
        // await articleLikingsTarget(id) // 取消点赞
        this.articleObj.attitude = -1
      } else {
        // await articleLikings({ target: id }) // 点赞
        this.articleObj.attitude = 1
      }
      // this.initArticlesInfo()
    },
    // 对文章不喜欢/取消不喜欢
    async dislikes (id) {
      if (this.articleObj.attitude === 0) {
        // await articleDislikesTarget(id) // 取消不喜欢
        this.articleObj.attitude = -1
      } else {
        // await articleDislikes({ target: id }) // 不喜欢
        this.articleObj.attitude = 0
      }
      // this.initArticlesInfo()
    },
    // 关注用户
    async followed (id) {
      // await userFollowings({ target: id })
      // this.initArticlesInfo()
      this.articleObj.is_followed = true
    },
    // 取消关注用户
    async followedTarget (id) {
      // await userFollowingsTarget(id)
      // this.initArticlesInfo()
      this.articleObj.is_followed = false
    },
    // 收藏文章/取消收藏
    async collectArticles (id) {
      if (this.articleObj.is_collected) {
        this.articleObj.is_collected = false
        // await articleCollections({ target: id })
      } else {
        this.articleObj.is_collected = true
        // await articleCollectionsTarget(id)
      }
      // this.initArticlesInfo()
    },
    // 发表评论
    async sendComments () {
      const res = await commentsBody({
        target: this.id,
        content: this.message
      })
      this.show = false
      this.message = ''
      this.list.unshift(res.data.data.new_obj)
    },
    // 发表回复评论
    async sendReplyComment () {
      const res = await commentsBody({
        target: this.replyComments.com_id.c.join(''),
        content: this.sms,
        art_id: this.id
      })
      this.sms = ''
      this.list2.unshift(res.data.data.new_obj)
    },
    // 点赞评论/取消
    async commentLikings (item) {
      if (!item.is_liking) {
        await commentLikings({
          target: item.com_id
        })
        item.is_liking = true
        item.like_count++
      } else {
        await commentLikingsTarget(item.com_id)
        item.is_liking = false
        item.like_count--
      }
    }
  }
}
</script>

<style lang="less" scoped>
  .details {
    .reply-popup {
      padding: 0 20px;
      .item {
        margin-top: 50px;
      }
      .reply-comment-text {
        position: fixed;
        top: 30%;
        left: 0;
        width: 100%;
        background-color: #fff;
        text-align: center;
        line-height: 50px;
        font-size: 20px;
        font-weight: 700;
      }
      .comment-reply-txt {
        font-size: 18px;
        font-weight: 700;
        height: 40px;
        line-height: 40px;
        border-top: 2px solid #ccc;
        border-bottom: 2px solid #ccc;
      }
      .reply-bottom {
        position: fixed;
        bottom: 0;
        left: 0;
        width: 100%;
        ::v-deep .send-btn {
          width: 60px;
        }
        ::v-deep .van-field__control{
          border: 1px solid #ccc;
          border-radius: 3px;
          padding: 3px 5px;
        }
      }
    }
    .item {
      display: flex;
      padding: 0 15px 20px;
      margin-top: 20px;
      .avatar {
        img {
          width: 40px;
          height: 40px;
          border-radius: 50%;
        }
      }
      .comment-content {
        width: 100%;
        .top {
          display: flex;
          justify-content: space-between;
          .nickname {
            flex: 1;
            font-size: 14px;
            color: #617faa;
          }
          .praise {
            font-size: 16px;
            padding-bottom: 15px;
            i {
              margin-right: 5px;
            }
          }
        }
        .middle {
          font-size: 18px;
          margin-bottom: 10px;
        }
        .floor {
          display: flex;
          font-size: 14px;
          align-items: center;
          .date {
            font-size: 14px;
            margin-right: 20px;
          }
          .reply {
            padding: 8px 15px;
            border-radius: 16px;
            background-color: #f4f5f6;
          }
        }
      }
    }
    .txt-color {
      color: orangered !important;
    }
    ::v-deep .van-ellipsis {
      overflow: visible;
    }
    .nav-bar {
      position: fixed;
      top: 0;
      left: 0;
      width: 100%;
    }
    ::v-deep .van-nav-bar .van-icon {
      color: #333333;
      font-size: 24px !important;
      font-weight: 700;
    }
    .logo {
      font-size: 22px;
      font-weight: 700;
      font-style: italic;
      color: #404040;
    }
    img {
      width: 30px;
      height: 30px;
      border-radius: 50%;
      vertical-align: middle;
      margin-right: 10px;
    }
    .content {
      padding: 0 15px;
      word-wrap:break-word;
      word-break:normal;
      margin-top: 60px;
      .title {
        margin-top: 10px;
        margin-bottom: 20px;
      }
      .user {
        margin-bottom: 30px;
        display: flex;
        justify-content: space-between;
        align-items: center;
        .username {
          flex: 1;
          font-size: 16px;
          font-weight: 700;
        }
      }
      ::v-deep .article {
        width: 100%;
        word-break:break-all;
        word-wrap:break-word;
        white-space: pre-wrap;
        font-size: 14px;
        margin-bottom:40px;
        overflow: auto;
        /*::v-deep pre {
          overflow: auto;
        }
        ::v-deep .pgc-img {
          width: 100%;
          overflow: auto;
        }*/
      }
      .operation {
        display: flex;
        justify-content: space-around;
        /*margin-bottom: 20px;*/
        div {
          width: 78px;
          height: 29px;
          border-radius: 15px;
          border: solid 1px #eeeeee;
          font-family: MicrosoftYaHei;
          text-align: center;
          font-size: 13px;
          font-weight: normal;
          font-stretch: normal;
          line-height: 29px;
          letter-spacing: 1px;
          color: #666666;
        }
      }
    }
    .nav-left {
      ::v-deep .van-nav-bar__title {
        margin-left: 60px;
      }
      .btn {
        line-height: 15px;
      }
    }
    .btn.followed {
      background-color: #cccccc !important;
    }
    .btn {
      padding: 8px 16px;
      background-color: #3296fa;
      border-radius: 4px;
      font-family: MicrosoftYaHei;
      font-size: 12px;
      font-weight: normal;
      font-stretch: normal;
      color: #ffffff;
    }
    .comment-list {
      padding-bottom: 100px;
    }
    .bottom {
      width: 100%;
      background-color: #fff;
      position: fixed;
      bottom: 0;
      left: 0;
      margin-top: 20px;
      border-top: 1px solid #cccccc;
      padding: 15px 20px;
      display: flex;
      justify-content: space-between;
      align-items: center;
      .write-comment {
        flex: 1;
        padding-left: 15px;
        border-radius: 16px;
        border: solid 1px #eeeeee;
        margin-right: 21px;
        font-family: MicrosoftYaHei;
        font-size: 15px;
        font-weight: normal;
        font-stretch: normal;
        line-height: 33px;
        letter-spacing: 1px;
        color: #a7a7a7;
      }
      .comment {
        position: relative;
        span {
          position: absolute;
          top: -5px;
          right: -8px;
          text-align: center;
          font-size: 12px;
          border-radius: 50%;
          padding: 2px;
          color: #fff;
          border: 1px solid #ccc;
          background-color: #000;
        }
      }
      div {
        margin-right: 21px;
        i {
          font-size: 21px;
        }
      }
    }
    .popup {
      padding: 25px 15px 0;
      .field {
        caret-color:#00B8D4;
        background: #f7f4f5;
        border-radius: 4px;
        font-size: 14px;
        font-family: PingFangSC, PingFangSC-Regular;
        font-weight: 400;
        text-align: left;
        color: #181a39;
        line-height: 20px;
        letter-spacing: 0px;
        ::v-deep .van-field__word-limit {
          color: #ccc;
        }
      }
      .send {
        padding: 11px 0;
        font-size: 16px;
        font-family: PingFangSC, PingFangSC-Regular;
        font-weight: 400;
        text-align: right;
        color: #b4b4bd;
        line-height: 23px;
        letter-spacing: 0px;
      }
    }
  }
</style>
